<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>作业评讲</title>
		<link rel="stylesheet" type="text/css" href="./layui/css/layui.css"/>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.center{
				margin: 0 auto;
				width: 1194px;
				height: 1872px;
				padding: 0 15px;
				background-color: #00FFFF;
			}
			@media (max-width:1225px) {
				.center{
					width: calc(100% - 30px);
				}
			}
			.color1{
				background-color: pink;
				height: 500px;
			}
			.color2{
				background-color: palevioletred;
				height: 500px;
			}
			@media (max-width:820px) {
				.color1{
					height: 300px;
				}
				.color2{
					height: 300px;
				}
			}
			@media (max-width:640px) {
				.div1{
					width: 100%;
				}
				.div2{
					width: 100%;
				}
			}
		</style>
	</head>
	<body>
		<div class="center layui-row layui-col-space15">
			<div class="layui-col-xs12 layui-col-sm8">
				<div class="layui-row layui-col-space15">
					<div class="layui-col-xs12">
						<div class="color1"></div>
					</div>
					<div class="layui-col-xs6 div1">
						<div class="color2"></div>
					</div>
					<div class="layui-col-xs6 div2">
						<div class="color1"></div>
					</div>
					<div class="layui-col-xs12">
						<div class="color2"></div>
					</div>
				</div>
			</div>
			<div class="layui-col-xs12 layui-col-sm4">
				<div class="color2"></div>
			</div>
		</div>
	</body>
</html>
